<template>
  <AdaptiveView>
    <div class="screen-container">
      <div class="screen-content" ref="screenRef">
        <div v-show="loading" class="mask flex-c">
          <dv-loading>
            <span class="loading-title">加载中...</span>
          </dv-loading>
        </div>
        <div v-if="!loading" class="h-full">
          <div class="h-full">
            <DataScreenHeader
              :title="`大连金泰制芯可视化看板`"
              :leftTitle="`班次:${activeData?.H1 || '-'}  浇注工:${
                activeData?.H2 || '-'
              }`"
              :showMonth="false"
              classes=""
            />

            <div style="height: calc(100% - 100px)" class="flex">
              <div
                class="flex w-[100%] mb-[10px] ml-[10px] mr-[10px] flex-col"
                style="height: calc(100% - 10px); flex: 1"
              >
                <!-- 上左侧图表 -->
                <div
                  style="
                    height: calc(50%);
                    overflow: hidden;
                    flex: 1;
                    position: relative;
                    width: 100%;
                    /* margin-bottom: 10px; */
                  "
                  class="bgchart2"
                >
                  <div class="overflow-hidden bgchart">
                    <div
                      class="flex justify-center items-center"
                      style="flex-direction: column"
                    >
                      <div class="title">
                        <span class="text">废芯率</span>
                      </div>
                      <!-- <JTScreen03HJJL
                        :hjjlData="hjjlData"
                        :activeData="activeData"
                        class="mt-[15px]"
                      /> -->
                    </div>
                  </div>
                </div>
                <!-- 下侧图表 -->
                <div
                  style="height: calc(50%); overflow: hidden"
                  class="bgchart2"
                >
                  <div class="overflow-hidden bgchart">
                    <div
                      class="flex justify-center items-center"
                      style="flex-direction: column"
                    >
                      <div class="title">
                        <span class="text">成本信息</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                style="height: calc(100% - 10px); flex: 1.5"
                class="flex w-[100%] mb-[10px] flex-col"
              >
                <!-- 上左侧图表 -->
                <div
                  style="
                    height: calc(50% - 10px);
                    overflow: hidden;
                    flex: 1;
                    margin-bottom: 10px;
                  "
                >
                  <div class="overflow-hidden bgchart">
                    <div
                      class="flex justify-center items-center"
                      style="flex-direction: column"
                    >
                      <div class="title">
                        <span class="text">合金加料</span>
                      </div>
                      <!-- <JTScreen03HJJL
                        :hjjlData="hjjlData"
                        :activeData="activeData"
                        class="mt-[15px]"
                      /> -->
                    </div>
                  </div>
                </div>
                <!-- 下侧图表 -->
                <div style="height: calc(50% - 10px); overflow: hidden">
                  <div class="overflow-hidden bgchart">
                    <div
                      class="flex justify-center items-center"
                      style="flex-direction: column"
                    >
                      <div class="title">
                        <span class="text">造型参数</span>
                      </div>
                      <!-- <JTScreen03ZXCS
                        :zxcsData="zxcsData"
                        :activeData="activeData"
                        class="mt-[15px]"
                      /> -->
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="flex w-[100%] mb-[10px] ml-[10px] mr-[10px] flex-col"
                style="height: calc(100% - 10px); flex: 1"
              >
                <!-- 上左侧图表 -->
                <div
                  style="
                    height: calc(50% - 10px);
                    overflow: hidden;
                    flex: 1;
                    position: relative;
                    width: 100%;
                    margin-bottom: 10px;
                  "
                  class="bgchart2"
                >
                  <div class="overflow-hidden bgchart">
                    <div
                      class="flex justify-center items-center"
                      style="flex-direction: column"
                    >
                      <div class="title">
                        <span class="text">安全生产日历</span>
                      </div>
                      <!-- <JTScreen03HJJL
                        :hjjlData="hjjlData"
                        :activeData="activeData"
                        class="mt-[15px]"
                      /> -->
                    </div>
                  </div>
                </div>
                <!-- 下侧图表 -->
                <div
                  style="height: calc(50% - 10px); overflow: hidden"
                  class="bgchart2"
                >
                  <div class="overflow-hidden bgchart">
                    <div
                      class="flex justify-center items-center"
                      style="flex-direction: column"
                    >
                      <div class="title">
                        <span class="text">计划完成率</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </AdaptiveView>
</template>

<script setup lang="ts">
import request from "@/utils/request";
// import { jzq_mock1, jzq_mock2, jzq_mock3, act_time_mock } from "./mock";
import JTScreen03HJJL from "./components/JTScreen03-HJJL.vue";
import dayjs from "dayjs";
// import { BorderBox8 as DvBorderBox8 } from "@kjgl77/datav-vue3";

defineOptions({
  name: "DATASCREENJTSCREEN03",
  inheritAttrs: false,
});

const loading = ref(true);
const refreshRate = ref(10);
onMounted(() => {
  getAllApi();
  // if (refreshRate.value) {
  //   timer.value = setInterval(() => {
  //     getAllApi();
  //   }, refreshRate.value * 1000);
  // }
});

function getAllApi() {
  // 实时数据 改为统一用一个接口，源代码逻辑不删除，以防回退
  getActiveData();
  // 熔炼区
  // getRlPC();
  // // 浇注区
  // getjzPC();
  // getjzCLX();
  // getjzSYT();
  // // 合金加料
  // gethjjlData();
  // // 造型参数
  // getZXCS();
}

// 造型参数查询
const zxcsData = ref<any>({});
const getZXCS = async () => {
  const { data }: any = await request({
    url: `/mes/biproductlinedata5/getEffectiveOne`,
    method: "post",
    data: {},
  }).catch(() => {
    zxcsData.value = {};
  });
  // console.log("造型参数查询", data);
  zxcsData.value = data || {};
};

// 熔炼区电炉
const rlDL = ref<any>([]);
const getRlDL = async () => {
  const { data }: any = await request({
    url: `/mes/biproductlinedata1/getList`,
    method: "post",
    data: {},
  }).catch(() => {
    rlDL.value = [];
  });
  // console.log("熔炼区电炉", data);
  rlDL.value = data || [];
  getRlSCWL(data[activeData.value.l1 - 1].deviceId);
};

// 熔炼区生产物料查询
const rlSCWL = ref<any>({});
const getRlSCWL = async (id: string) => {
  const { data }: any = await request({
    url: `/mes/biproductlinedata2/getProduct`,
    method: "post",
    data: {
      deviceId: id,
      planTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    },
  }).catch(() => {
    rlSCWL.value = {};
  });
  // console.log("熔炼区生产物料查询", data);
  rlSCWL.value = data || {};
  loading.value = false;
};

// 熔炼区批次查询
const rlPC = ref<any>({});
const getRlPC = async () => {
  const { data }: any = await request({
    url: `/mes/biproductlinedata3/getLeLastOne`,
    method: "post",
    data: {
      planTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    },
  }).catch(() => {
    rlPC.value = {};
  });
  // console.log("熔炼区批次查询", data);
  rlPC.value = data || {};
};

// 合金加料查询
const hjjlData = ref<any>({});
const gethjjlData = async () => {
  const { data }: any = await request({
    url: `/mes/biproductlinedata4/getLeLastOne`,
    method: "post",
    data: {
      planTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    },
  }).catch(() => {
    hjjlData.value = {};
  });
  // console.log("合金加料查询", data);
  hjjlData.value = data || {};
};

// 浇注区批次查询
const jzPC = ref<any>({});
const getjzPC = async () => {
  const { data }: any = await request({
    url: `/mes/biproductlinedata6/getLeLastOne`,
    method: "post",
    data: {
      planTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    },
  }).catch(() => {
    jzPC.value = {};
    // jzPC.value = jzq_mock1;
  });
  // console.log("浇注区批次查询", data);
  jzPC.value = data || {};
};

// 浇注区测量项查询
const jzCLX = ref<any>([]);
const getjzCLX = async () => {
  const { data }: any = await request({
    url: `/mes/biproductlinedata7/getList`,
    method: "post",
    data: {},
  }).catch(() => {
    jzCLX.value = [];
    // jzCLX.value = jzq_mock2;
  });
  // console.log("浇注区测量项查询", data);
  jzCLX.value = data || [];
};

// 浇注区示意图查询
const jzSYT = ref<any>([]);
const getjzSYT = async () => {
  const { data }: any = await request({
    url: `/mes/biproductlinedata8/getLeLastOne`,
    method: "post",
    data: {
      planTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    },
  }).catch(() => {
    jzSYT.value = [];
    // jzSYT.value = jzq_mock3;
  });
  // console.log("浇注区示意图查询", data);
  jzSYT.value = data || [];
};

// 实时数据查询
const activeData = ref<any>({});
const getActiveData = async () => {
  const { data }: any = await request({
    url: `/mes/biscreendisplay/getEffectiveOne`,
    method: "post",
    data: {
      // planTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    },
  }).catch(() => {
    activeData.value = {};
    // activeData.value = act_time_mock;
  });
  // console.log("activeData", data);
  activeData.value = data || {};
  loading.value = false;
  // activeData.value = {
  //   H1: "123",
  //   H2: "13",
  //   L1: "1",
  //   L2: "2",
  //   L3: "3",
  //   L4: "3",
  //   L5: "E2222013",
  //   L6: "正在出水",
  //   L7: "E2233003",
  //   L8: "12.2",
  //   L9: "115455",
  //   L10: "1465±15",
  //   L11: "1547",
  //   L12: "1465±15",
  //   L13: "",
  //   L14: "115909",
  //   L15: "24",
  //   L16: "1030",
  //   L17: "1000",
  //   L18: "32",
  //   M1: "E202013",
  //   M2: "加合金",
  //   M3: "A",
  //   M4: "9.56",
  //   M5: "9.65",
  //   M6: "1.74",
  //   M7: "1.80",
  //   M8: "5.21",
  //   M9: "4.92",
  //   M10: "27.2",
  //   M11: "95.0",
  //   M12: "47.0",
  //   M13: "1130",
  //   M14: "1",
  //   M15: "1",
  //   M16: "0",
  //   M17: "1",
  //   R1: "PEW1212121",
  //   R2: "123",
  //   R3: "554",
  //   R4: "10",
  //   R5: "1465±15",
  //   R6: "1330",
  //   R7: "1465±15",
  //   R8: "0",
  //   R9: "1465±15",
  //   R10: "33",
  //   R11: "600",
  //   R12: "554",
  //   R13: "1465±15",
  //   R14: "117",
  //   R15: "PE20201801",
  //   R16: "PE20201801",
  //   R17: "PE20201801",
  //   R18: "PE20201801",
  //   R19: "PE20201801",
  //   R20: "PE20201801",
  //   R21: "PE20201801",
  //   R22: "PE20201801",
  //   R23: "1",
  //   R24: "1",
  //   R25: "1",
  //   R26: "1",
  //   R27: "2",
  //   R28: "2",
  //   R29: "0",
  //   R30: "2",
  // };

  // getRlDL();
  // getRlSCWL(data?.)
};

let timer: any = ref(null);

onBeforeUnmount(() => {
  clearInterval(timer.value);
  timer.value = null;
});
</script>

<style lang="scss" scoped>
.screen-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9999;
    background-image: url("@/assets/images/screen/home_bg.png");
  }

  .screen-content {
    width: 1678px;
    height: 946px;
    box-sizing: border-box;
    // padding: 12px;
    background-image: url("@/assets/images/screen/home_bg.png");
    transition: all 0.2s ease-in-out;

    :deep(.el-card) {
      background-color: transparent;
      border: none;
      .el-card__header {
        background: rgba(212, 219, 249, 0.1);
        border-bottom: none;
        color: white;
        .el-card-title {
          color: white;
        }
      }
    }

    .title {
      width: 100%;
      height: auto;
      width: 100%;
      line-height: 60px;
      .text {
        font-size: 32px;
        padding-left: 50px;
        font-family: YOUSHE;
        writing-mode: horizontal-tb;
        text-orientation: upright;
        color: transparent;
        background: linear-gradient(
            0deg,
            rgb(255, 255, 255) 0px,
            rgb(255, 255, 255) 100%
          )
          text;
        clip-path: inset(1px);
      }
    }
    .bgchart {
      height: 100%;
      height: 100%;
    }
    .bgchart2 {
      background-image: url(@/assets/images/bg3.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;
    }

    .loading-title {
      font-size: 16px;
      color: #fff;
      margin-top: 10px;
    }
  }
}

.screen_back {
  height: 100%;
  // background: url("@/assets/images/screen/pageBg1.png") center center / 100%
  //   100% no-repeat;
}
</style>
